@extends('layouts.admin')
@section('pageTitle', '新建触发')
@section('style')
    <style>

        /*meiyun*/
        .mgud{
            margin: 20px auto;
        }
        .mgb10{
            margin-bottom: 10px;
        }
        .mgr30{
            margin-right: 30px;
        }
        .main-panel{
            overflow: auto;
        }

        .card form [class*="col-"]:first-child {
            padding: 0 6px;
        }

        .card form [class*="col-"]:last-child {
            padding: 0 6px;
        }

        .template-active-img img {
            width: 100%;
            height: auto;
            overflow: hidden;
        }
        .template-active-img .user-template-btn {
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -22px;
        }
        .template-active-img .template-qrcode {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(0,0,0,.5);
            display: none;
        }
        .template-active-img:hover .template-qrcode{
            display:block
        }
    </style>
@endsection
@section('content')
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="content content-full-width">

                                <form id="wizardForm" class="form-horizontal" method="" action="" >

                                    <div class="row">
                                        <!--左侧手机演示图-->
                                        <div class="col-xs-4 app">
                                            <div class="phone-view">
                                                <div class="app-view">
                                                    <div class="touch-app-mainC">
                                                        <!--大图-->
                                                        <div class="touch-app-big-image displayable">
                                                            <img src="/images/admin/trigger_icon_big.png"/>
                                                        </div>
                                                        <!--小图-->
                                                        <div class="touch-app-small-moveDiv">
                                                            <div class="touch-app-small-image"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--右侧功能配置图-->
                                        <div class="col-xs-8">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <!--规则名称-->
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">规则名称</label>
                                                        <div class="col-sm-7">
                                                            <input class="form-control point-rule-name" type="text"
                                                                   placeholder="请输入规则名称，最多支持20个字符"
                                                                   maxlength=20
                                                                   name="prizename"
                                                                   required="required"
                                                            />
                                                        </div>
                                                    </div>
                                                    <!--投放活动-->
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">投放活动</label>
                                                        <div class="col-sm-7">
                                                            <div class="input-group">
                                                                <input type="text" class="form-control" placeholder="+添加活动" aria-label="添加活动">
                                                                <div class="input-group-btn">
                                                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">列表活动 <span class="caret"></span></button>
                                                                    <ul class="dropdown-menu dropdown-menu-right">
                                                                        <li><a href="#">列表活动</a></li>
                                                                        <li><a href="#">自由活动</a></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--选择平台-->
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">选择平台</label>
                                                        <div class="col-sm-7">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="pointLevelJs" class="" value="pointLevelJs"> Js
                                                            </label>
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="pointLeveliOS" class="" value="pointLeveliOS"> iOS
                                                            </label>
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="pointLevelAndroid" class="" value="pointLevelAndroid"> Android
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <!--触发形式-->
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">触发形式</label>
                                                        <div class="col-sm-7">
                                                            <label class="radio-inline">
                                                                <input type="radio" name="touchPictureCategory" class="touch-put-small-picture" value="smallPicture" checked> 小图
                                                            </label>
                                                            <label class="radio-inline">
                                                                <input type="radio" name="touchPictureCategory" class="touch-put-big-picture" value="bigPicture"> 大图
                                                            </label>
                                                            <label class="radio-inline">
                                                                <input type="radio" name="touchPictureCategory" class="touch-put-no-picture" value="noPicture"> 无图
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <!--触发形式选择后的图像展示-->
                                                    <!--小图-->
                                                    <div class="touch-small-picture">
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">图标样式</label>
                                                            <div class="col-sm-7">
                                                                <ul class="touch-small-ico-ul">
                                                                    <li class="touch-small-ico-li touch-ico-border">
                                                                        <img src="/images/admin/trigger_icon2.png">
                                                                    </li>
                                                                    <li class="touch-small-ico-li">
                                                                        <img src="/images/admin/trigger_icon3.png">
                                                                    </li>
                                                                    <li class="touch-small-ico-li">
                                                                        <img src="/images/admin/trigger_icon4.png">
                                                                    </li>
                                                                    <div class="touch-ico-add" data-toggle="modal" data-target="#touch-upload-modal">
                                                                        +
                                                                    </div>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-9 col-sm-offset-2">
                                                                <div class="form-group">
                                                                    <label class="control-label">100 * 100像素，支持GIF，PNG，JPG格式，建议小于200KB。</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">图标位置</label>
                                                            <div class="col-sm-7">
                                                                拖动图标到自定义的位置（距离顶部：<span class="touch-ico-top"></span>％；距离左侧：<span class="touch-ico-left"></span>％）
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!--大图-->
                                                    <div class="touch-big-picture displayable">
                                                        <div class="form-group ">
                                                            <label class="col-sm-2 control-label">图标样式</label>
                                                            <div class="col-sm-7">
                                                                <ul class="touch-small-ico-ul">
                                                                    <li class="touch-small-ico-li touch-ico-border">
                                                                        <img src="/images/admin/trigger_icon_big.png">
                                                                    </li>
                                                                    <li class="touch-small-ico-li">
                                                                        <img src="/images/admin/trigger_icon3.png">
                                                                    </li>

                                                                    <div class="touch-ico-add" data-toggle="modal" data-target="#touch-upload-modal">
                                                                        +
                                                                    </div>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-9 col-sm-offset-2">
                                                                <div class="form-group">
                                                                    <label class="control-label">500* 700像素，支持GIF，PNG，JPG格式，建议小于200KB。</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!--悬浮时间-->
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">悬浮时间</label>
                                                        <div class="col-sm-7">
                                                            <div class="row">
                                                                <div class="col-sm-6">
                                                                    <select class="form-control touch-select-float-time">
                                                                        <option value="point-float-all">一直存在</option>
                                                                        <option value="point-float-self">定时消失</option>
                                                                    </select>
                                                                </div>
                                                                <div class="col-sm-6 input-group touch-input-float-time displayable">
                                                                   <input class="form-control" type="number"/>
                                                                    <div class="input-group-addon">秒</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--触发时间-->
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">触发时间</label>
                                                        <div class="col-sm-7">
                                                            <div class="row service-charges">
                                                                <div class="col-sm-5 service-charges-name service-charges-name-0" style="padding-left: 15px;">
                                                                    <input type="text" placeholder="开始时间"  required="" name="startTime" data-msg="请输入开始时间" class="form-control datetimepicker">
                                                                </div>
                                                                <div class="col-sm-1">至</div>
                                                                <div class="col-sm-5 service-charges-remark service-charges-remark-0">
                                                                    <input type="text" placeholder="结束时间"  required="" data-msg="请输入结束时间" name="endTime" class="form-control datetimepicker">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--触发次数-->
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">触发次数</label>
                                                        <div class="col-sm-7">
                                                            <div class="row">
                                                                {{--<div class="form-group">--}}
                                                                    <label class="sr-only col-sm-2" for="exampleInputAmount">触发次数</label>
                                                                    <div class="input-group col-sm-10">
                                                                        <div class="input-group-addon">每人可触发</div>
                                                                        <input type="number" class="form-control" id="touchNumbers" placeholder="请输入次数"/>
                                                                        <div class="input-group-addon">
                                                                            <select class="valid">
                                                                                <option value="touch-number-all ">次/活动全程</option>
                                                                                <option value="touch-number-active">次/活动每日</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                {{--</div>--}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--触发条件-->
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">触发条件</label>
                                                        <div class="col-sm-7">
                                                            <select class="form-control">
                                                                <option value="touch-condition-login">登录</option>
                                                                <option value="touch-condition-register">注册</option>
                                                                <option value="touch-condition-pay">支付</option>
                                                                <option value="touch-condition-startup">启动</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <!--触发用户-->
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">触发用户</label>
                                                        <div class="col-sm-7">
                                                            <select class="form-control">
                                                                <option value="point-user-all">所有用户</option>
                                                                <option value="point-user-sex">性别</option>
                                                                <option value="point-user-province">省份</option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="footer pull-center">

                                        <button type="button" class="btn btn-info btn-fill btn-wd btn-finish sponsor_sur"
                                        >完成
                                        </button>

                                        <div class="clearfix"></div>
                                    </div>

                                </form>


                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal -->
                <div class="modal fade" id="touch-upload-modal" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="touch-upload-modal-header">上传图片</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-sm-6 col-sm-offset-3">
                                        <input type="file" name="upfile" accept="image/gif,image/jpeg,image/png" data-for="backgroundImg" data-preview-file-type="text" class="form-control touch-modal-upload-file" value="" title="">
                                        <img type="hidden" name="testImgSize">
                                    </div>
                                </div>
                                {{--<div class="touch-modal-ico-list">--}}
                                {{--<ul class="touch-modal-ico-ul">--}}
                                {{--<li>--}}
                                {{--<div class="touch-upload-input" tooltip="直接上传">--}}
                                {{--<input type="file" class="touch-input-upload-file f30 text-center" accept=".jpg,.png,.jpeg,.gif"/>--}}
                                {{--<label class="text-center f30">+</label>--}}

                                {{--</div>--}}

                                {{--</li>--}}
                                {{--</ul>--}}
                                {{--</div>--}}
                                {{--</div>--}}
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary touch-modal-sure">确定</button>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>



@endsection
@section('script')
    <script>

        $(document).ready(function () {
            var smallimgsrc;
            var bigimgsrc;
            //图标样式选择
            $('.touch-put-small-picture').click(function () {
                $('.touch-big-picture').addClass('displayable');
                $('.touch-small-picture').removeClass('displayable');
                $('.touch-app-big-image').addClass('displayable');
                $('.touch-app-small-image').removeClass('displayable');
            });
            $('.touch-put-big-picture').click(function () {
                $('.touch-small-picture').addClass('displayable');
                $('.touch-big-picture').removeClass('displayable');
                $('.touch-app-small-image').addClass('displayable');
                $('.touch-app-big-image').removeClass('displayable');
            });
            $('.touch-put-no-picture').click(function () {

                $('.touch-small-picture').addClass('displayable');
                $('.touch-big-picture').addClass('displayable');
            });
            //悬浮时间选择框
            $('.touch-select-float-time').change(function () {
                var selectval=$(this).val();
                if(selectval=='point-float-self'&&$('.touch-input-float-time').hasClass('displayable')){

                    $('.touch-input-float-time').removeClass('displayable');
                }else if(!$('.touch-input-float-time').hasClass('displayable')){

                    $('.touch-input-float-time').addClass('displayable');
                }
            });
            //摸态框图像选择
            $('.touch-modal-sure').click(function () {
                smallimgsrc=$('.touch-modal-upload-file').val();
                console.log(smallimgsrc);
//                $('.modal-body>img[name="testImgSize"]').attr('src',smallimgsrc);
                $('.touch-ico-add').before('<li class="touch-small-ico-li">' +
                    '<img src="'+smallimgsrc+'">'+
                    '</li>');
                $('#touch-upload-modal').modal('hide');
            });
            //小图拖拽

            $( ".touch-app-small-image" ).draggable({ containment: ".touch-app-small-moveDiv", scroll: false });
            $( ".touch-app-small-image" ).draggable({
                start: function() {
                },
                drag: function(event,ui) {
                    $('.touch-app-small-image').css('left',ui.position.left);
                    $('.touch-app-small-image').css('top',ui.position.top);
                    var toleft=Math.round(ui.position.left/ 305 * 100);
                    var totop=Math.round(ui.position.top/ 414 * 100);
                    $('.touch-ico-top').empty();
                    $('.touch-ico-top').html(totop);
                    $('.touch-ico-left').empty();
                    $('.touch-ico-left').html(toleft);
                },
                stop: function(event,ui) {
//                    console.log(ui.offset.left,'ui.offset.left');
//                    console.log(ui.offset.top,'ui.offset.top');
//                    console.log(ui.position.left,'ui.position.left');
//                    console.log(ui.position.top,'ui.position.top');
                }
            });
            //图像类型图像点击
            $('.touch-small-ico-li').click(function () {
                $('.touch-small-ico-li').removeClass('touch-ico-border');
                $(this).addClass('touch-ico-border');
                var changeSrc=$(this).children('img')[0].src.replace('http://local.cloud.com','');
                if($('input[type="radio"]:checked').val()=='smallPicture'){
                    $('.touch-app-small-image').css({
                        'background':'url('+changeSrc+')',
                        'background-size':'40px auto',
                    });
                }else{
                    $('.touch-app-big-image>img').attr('src',changeSrc);
                }
            });


        });



    </script>
@endsection